<script lang="ts" setup>
import { reactive, ref, watch } from "vue"
import {
  createOrderDataApi,
  update1OrderDataApi,
  getOrderDataApi,
  getOrderOneApi,
  downLoadOrderTable,
  getOrdeCode,
  againPush,
  getDyLive
} from "@/api/order"
import { type IGetOrderData } from "@/api/order/types/order"
import { type IGetComboData } from "@/api/combo/types/combo"
import { type FormInstance, type FormRules, ElMessage } from "element-plus"
import { Search, Refresh, RefreshRight, UploadFilled, Download } from "@element-plus/icons-vue"
import { getComboDataApi10 } from "@/api/combo"
import { usePagination } from "@/hooks/usePagination"
import { useUserStore } from "@/store/modules/user"
import { useComboStore } from "@/store/modules/combo"
import { checkPhoneNumber, checkID, isAddressDetailed } from "@/utils/validate"
import { getToken } from "@/utils/cache/cookies"
// import { IdCard } from "@/utils/getCardId"
import { uploadCidImageList } from "@/api/order"
import { formatDateTime } from "@/utils"
import { sizeDate, Y, M, D, shortcuts } from "@/utils/dateSet"
defineOptions({
  name: "OrderList"
})
const loading = ref<boolean>(false)
const updateInform = ref<boolean>(false)
const comboStore = useComboStore()
const comboList = ref<IGetComboData[]>([])
const payDate = ref("")
const seeState = ref("")
const comboStr = ref<string>("")
/**END */
const codeList = ref<any>([])
const logSticList = ref<any>([
  {
    code: 0,
    state: "未发货"
  },
  {
    code: 1,
    state: "已发货"
  },
  {
    code: 2,
    state: "拒签"
  },
  {
    code: 3,
    state: "已签收"
  },
  {
    code: 4,
    state: "未签收"
  }
])
/**-------- */
const getCodeList = () => {
  getOrdeCode().then((res: any) => {
    // console.log(res)
    codeList.value = res.data
  })
}
getCodeList()
/**END */

const fileList0 = ref<any>([]) //身份证正面
const fileList1 = ref<any>([]) //身份证反面
const fileList2 = ref<any>([]) //人像
// ****************订单批量上传*******************************
const uploadRef = ref<any>(null)
const upload = reactive({
  open: false,
  // 弹出层标题
  title: "",
  // 是否禁用上传
  isUploading: false,
  headers: { token: getToken() },
  // 上传的地址
  url: "",
  //模板下载地址
  templateUrl: ""
})
//批量修改按钮点击
const submitEdit = () => {
  upload.open = true
  upload.title = "批量修改"
  upload.url = "api/order/batchUpdate"
  upload.templateUrl = "api/order/down/downTemplate"
}

//批量重提按钮点击
const submitAgain = () => {
  upload.open = true
  upload.title = "批量重提(向上级重新提交订单)"
  upload.url = "api/order/batchCt"
  upload.templateUrl = "api/order/down/downCtTemplate"
}
const updateInfo = ref<any>(null)
const updateSuccInfo = ref<boolean>(false)
const handleFileUploadProgress = () => {
  upload.isUploading = true
}
const handleSucc = (res: any) => {
  // loading.value = false
  console.log(res)
  if (res.code == 200) {
    getTableData()
    updateInfo.value = res
    updateSuccInfo.value = true
    upload.isUploading = false
    upload.open = false
    uploadRef.value.clearFiles()

    // ElMessage.success("成功！")
  } else {
    ElMessage.error(res.message)
  }
}
/** 提交上传文件 */
const submitFileForm = () => {
  uploadRef.value.submit()
}
// *********************订单上传结束*************************

const formatterCombo = (row: any, column: any, celValue: any) => {
  comboList.value.filter((item: any) => {
    if (item.id == row.sku) {
      celValue = item.name
    }
  })
  return celValue
}
const comboSkuToStr = (row: any) => {
  comboList.value.filter((item: any) => {
    if (item.id == row.sku) {
      comboStr.value = item.name
    }
  })
}

const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()

//#region 增
const dialogVisible = ref<boolean>(false)
const formRef = ref<FormInstance | null>(null)
const userStore = useUserStore()
const formData = reactive({
  orderId: "",
  source: "",
  iccid: "",
  handleMobile: "",
  sku: "",
  cardName: "",
  cardId: "",
  consignee: "",
  takeMobile: "",
  takeAddress: "",
  state: "",
  commissionData: "", //结佣数据
  active: "", //激活时间
  logisticsState: "", //物流状态
  superiorId: "",
  update: new Date(),
  superiorName: "",
  note: "",
  cardFront: "",
  cardBack: "",
  photo: "",
  chargingState: "",
  chargingDate: new Date(payDate.value),
  result: "",
  logisticsCompany: "",
  logisticsId: "",
  commissionState: "",
  recorder: "",
  salesman: "", //业务员
  remark: "", //备注
  activeData: "", //激活数据
  allData: "",
  wantWant: "",
  create: "",
  callBack: "",
  isDiscard: "否", //是否废单
  dlIsMoney: "", //代理是否结算佣金
  dlMoney: "", //代理结算佣金时间
  dlMoneyDate: "", //代理结算佣金时间
  sourceRemark: "",
  dyId: "" //抖音直播间
})

const formRules: FormRules = reactive({
  orderId: [{ required: true, trigger: "blur", message: "请输入外部订单号" }],
  cardName: [{ required: true, trigger: "blur", message: "请填写姓名" }],
  consignee: [{ required: true, trigger: "blur", message: "请填写收货名" }],
  sku: [{ required: true, trigger: "blur", message: "请选择套餐" }],
  // handleMobile: [{ required: true, validator: checkPhoneNumber, trigger: "blur" }],
  cardId: [{ required: true, validator: checkID, trigger: "blur" }],
  takeMobile: [{ required: true, validator: checkPhoneNumber, trigger: "blur" }],
  // takeAddress: [{ required: true, validator: isAddressDetailed, trigger: "blur" }],//收货地址校验暂时关闭，开启时注释下面打开这个
  takeAddress1: [{ required: true, validator: isAddressDetailed, trigger: "blur" }],

  team: [{ required: true, trigger: "blur", message: "请选择团队" }],
  dataRule: [{ required: true, trigger: "blur", message: "请选择规则" }],
  dataState: [{ required: false, trigger: "blur", message: "请选择状态" }]
})
const handleCreate = () => {
  formRef.value?.validate((valid: boolean) => {
    if (valid) {
      formData.chargingDate = new Date(payDate.value)
      uploadFuc()
    } else {
      return false
    }
  })
}
const resetForm = () => {
  currentUpdateId.value = undefined
  clearValidate()
  formData.orderId = ""
  formData.handleMobile = ""
  formData.sku = ""
  formData.cardName = ""
  formData.cardId = ""
  formData.consignee = ""
  formData.takeMobile = ""
  formData.takeAddress = ""
  formData.cardFront = ""
  formData.cardBack = ""
  formData.photo = ""
  formData.chargingState = ""
  formData.chargingDate = new Date(payDate.value)
  formData.result = ""
  formData.logisticsCompany = ""
  formData.logisticsId = ""
  formData.commissionState = ""
  formData.salesman = ""
  formData.activeData = ""
  formData.remark = ""
  formData.wantWant = ""
  formData.dyId = ""
  formData.isDiscard = "否"
  formData.dlIsMoney = ""
  formData.dlMoney = ""
  formData.dlMoneyDate = ""
  formData.sourceRemark = ""
  formData.active = ""
  fileList0.value = []
  fileList1.value = []
  fileList2.value = []
  isCard.value = false
  maxAge.value = 0
  minAge.value = 0
  isNoArea.value = ""
  comboStr.value = ""
  // selectedOptions.value = []
}
//#endregion

//#endregion

// row数据公用
const rowData = (row: any) => {
  currentUpdateId.value = row.id
  formData.orderId = row.orderId
  formData.source = row.source
  formData.iccid = row.iccid
  formData.handleMobile = row.handleMobile
  formData.sku = row.sku
  comboSkuToStr(row)
  formData.cardName = row.cardName
  formData.cardId = row.cardId
  formData.consignee = row.consignee
  formData.takeMobile = row.takeMobile
  formData.takeAddress = row.takeAddress
  formData.note = row.note
  formData.chargingState = row.chargingState
  payDate.value = row.chargingDate
  formData.result = row.result
  formData.recorder = row?.recorder
  formData.salesman = row?.salesman
  formData.remark = row?.remark
  formData.active = row?.active ? formatDateTime(row?.active) : ""
  formData.wantWant = row?.wantWant
  formData.dyId = row?.dyId
  formData.isDiscard = row?.isDiscard
  formData.dlIsMoney = row?.dlIsMoney
  formData.dlMoney = row?.dlMoney
  formData.dlMoneyDate = row?.dlMoneyDate
  formData.state = row?.state?.code
  formData.logisticsState = row?.logisticsState?.code
  formData.activeData = row?.activeData
  formData.commissionData = row?.commissionData
  formData.logisticsCompany = row.logisticsCompany
  formData.logisticsId = row.logisticsId
  formData.commissionState = row.commissionState
  formData.create = row.create
  formData.sourceRemark = row.sourceRemark
  // formData.allData = row.allData
  formData.active = row.active
  formData.callBack = row.callBack
  formData.superiorId = row.superiorId
  formData.superiorName = comboList.value.filter((item: any) => item.id == Number(row.sku))[0]?.source
  formData.sourceRemark = comboList.value.filter((item: any) => item.id == Number(row.sku))[0]?.sourceRemark
  if (row.cardFront) {
    fileList0.value = row.cardFront?.split(",").map((item: any) => {
      return {
        url: item
      }
    })
  } else {
    fileList0.value = []
  }

  // console.log(fileList0.value, 999)

  if (row.cardBack) {
    fileList1.value = row.cardBack?.split(",").map((item: any) => {
      return {
        url: item
      }
    })
  } else {
    fileList1.value = []
  }
  if (row.photo) {
    fileList2.value = row.photo?.split(",").map((item: any) => {
      return {
        url: item
      }
    })
  } else {
    fileList2.value = []
  }

  formData.cardBack = row.cardBack?.split("/image/")[1]
  formData.cardFront = row.cardFront?.split("/image/")[1]
  formData.photo = row.photo?.split("/image/")[1]
  dialogVisible.value = true
}

//#region 改
const currentUpdateId = ref<undefined | string>(undefined)
const handleUpdate = (row: IGetOrderData) => {
  seeState.value = "update"
  loading.value = true
  getOrderOneApi({
    id: row.id
  })
    .then((res: any) => {
      rowData(res.data)
      console.log(res.data, 8888)
    })
    .finally(() => {
      loading.value = false
    })
}
//#endregion

//#region 查
const tableData = ref<IGetOrderData[]>([])
const searchFormRef = ref<FormInstance | null>(null)
const searchData = reactive({
  source: "",
  department: userStore.department,
  sku: "",
  cardName: "",
  orderOutId: "",
  handleMobile: "",
  cardId: "",
  takeMobile: "",
  searchDate: [
    new Date(Y.value, M.value, D.value, 0, 0, 0).getTime() - 3600 * 1000 * 24 * 7,
    new Date(Y.value, M.value, D.value, 23, 59, 59)
  ],
  state: "",
  id: "",
  salesman: "",
  superName: "",
  wantWant: "",
  dyId: "",
  isDiscard: "",
  logisticsId: "", // 物流单号
  commissionState: "",
  re_id: ""
})
const getTableData = () => {
  getTableInfo(false)
}
/**方便下载订单功能将请求单拎出来 */
const getTableInfo = async (isDown: boolean) => {
  loading.value = true
  const page = ref<number>(paginationData.currentPage)
  const size = ref<number>(paginationData.pageSize)
  if (isDown) {
    page.value = 1
    if (userStore.teamName) {
      size.value = 1000
    } else {
      size.value = 10000000
    }
  } else {
    page.value = paginationData.currentPage
    size.value = paginationData.pageSize
  }
  const salesman = ref<string>(searchData.salesman)
  if (salesman.value !== "") {
    salesman.value = searchData.salesman
      .split(",")
      .map((item: any) => {
        return "'" + item + "'"
      })
      .join(",")
  } else {
    salesman.value = ""
  }
  await getOrderDataApi({
    page: page.value,
    size: size.value,
    source: searchData.source,
    department: searchData.department,
    cardName: searchData.cardName,
    orderOutId: searchData.orderOutId,
    handleMobile: searchData.handleMobile,
    cardId: searchData.cardId,
    takeMobile: searchData.takeMobile,
    sku: searchData.sku,
    logisticsId: searchData.logisticsId,
    wantWant: searchData.wantWant,
    dyId: searchData.dyId,
    isDiscard: searchData.isDiscard,
    start:
      searchData.searchDate && searchData.searchDate.length ? new Date(searchData?.searchDate[0]).getTime() : "" || "",
    end:
      searchData.searchDate && searchData.searchDate.length ? new Date(searchData?.searchDate[1]).getTime() : "" || "",
    state: searchData.state || 0,
    id: searchData.id,
    superName: searchData.superName,
    salesman: salesman.value,
    re_id: searchData.re_id,
    commissionState: searchData.commissionState
  })
    .then((res) => {
      if (isDown) {
        downInfo.value = res.data.orderList
      } else {
        paginationData.total = res.data.total
        tableData.value = res.data.orderList
      }
    })
    .catch(() => {
      tableData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}
const handleSearch = () => {
  if (paginationData.currentPage === 1) {
    getTableData()
  }
  paginationData.currentPage = 1
}
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  if (paginationData.currentPage === 1) {
    getTableData()
  }
  paginationData.currentPage = 1
}
const handleRefresh = () => {
  getTableData()
}

/**查看 详情 */
const tmId = ref("")
const rowJM = ref()
const handleSeeMore = (row: any) => {
  // loading.value = true
  seeState.value = "see"
  rowData(row)
  tmId.value = row.id
  rowJM.value = row
}
/**脱敏操作 */
const handleDecrypt = (flag: any) => {
  getOrderOneApi({
    id: tmId.value
  }).then((res: any) => {
    if (flag === "address") {
      formData.takeAddress = res.data.takeAddress
      formData.cardId = rowJM.value.cardId
      formData.cardName = rowJM.value.cardName
      formData.takeMobile = rowJM.value.takeMobile
    }
    if (flag === "icard") {
      formData.cardId = res.data.cardId
      formData.takeAddress = rowJM.value.takeAddress
      formData.cardName = rowJM.value.cardName
      formData.takeMobile = rowJM.value.takeMobile
    }
    if (flag === "cardName") {
      formData.cardName = res.data.cardName
      formData.takeAddress = rowJM.value.takeAddress
      formData.cardId = rowJM.value.cardId
      formData.takeMobile = rowJM.value.takeMobile
    }
    if (flag === "takeMobile") {
      formData.takeMobile = res.data.takeMobile
      formData.takeAddress = rowJM.value.takeAddress
      formData.cardId = rowJM.value.cardId
      formData.cardName = rowJM.value.cardName
    }
  })
  loading.value = false
}
//#endregion

/**  套餐切换 */
import { getComboDataDetailApi1 } from "@/api/combo/index1"
const isCard = ref<boolean>(false)
const maxAge = ref<number>(0)
const minAge = ref<number>(0)
const isNoArea = ref<any>("")
const noAreaFinallyArry = ref<any>([]) //不发货 省市区
const noAreaP = ref<any>([]) //不发货省
const noAreaPandC = ref<any>([]) //不发货省市
const noField = ref<any>([]) //敏感词
const comboChange = async (val: any) => {
  console.log(val)
  if (val) {
    const filterCombo = ref<any>()
    await getComboDataDetailApi1({
      id: val
    }).then((res: any) => {
      filterCombo.value = res.data
      loading.value = false
    })
    isCard.value = filterCombo.value?.card
    maxAge.value = filterCombo.value?.maxAge
    minAge.value = filterCombo.value?.minAge
    isNoArea.value = filterCombo.value?.area
    noField.value = filterCombo.value?.guide
    if (isNoArea.value) {
      const arr = JSON.parse(isNoArea.value.replace(/'/g, '"'))
      noAreaP.value = arr.filter((item: any) => item.length == 1).flat()
      noAreaPandC.value = arr.filter((item: any) => item.length == 2).map((item: any) => item.join(""))
      noAreaFinallyArry.value = arr.filter((item: any) => item.length == 3).map((item: any) => item.join(""))
    }
  } else {
    isCard.value = false
    maxAge.value = 60
    minAge.value = 16
    isNoArea.value = ""
  }
}

/** 图片改变 */
const handleChageImg = (file: any, resfileList: any) => {
  const size = ref(2)
  const fileSizeFlag = file.size / 1024 / 1024 < size.value
  if (!fileSizeFlag) {
    ElMessage.error(`请上传不大于${size.value}M的图片!`)
    fileList0.value = []
  } else {
    fileList0.value = resfileList
  }
}
const handleChageImg1 = (file: any, resfileList: any) => {
  const size = ref(2)
  const fileSizeFlag = file.size / 1024 / 1024 < size.value
  if (!fileSizeFlag) {
    ElMessage.error(`请上传不大于${size.value}M的图片!`)
    fileList1.value = []
  } else {
    fileList1.value = resfileList
  }
}
const handleChageImg2 = (file: any, resfileList: any) => {
  const size = ref(2)
  const fileSizeFlag = file.size / 1024 / 1024 < size.value
  if (!fileSizeFlag) {
    ElMessage.error(`请上传不大于${size.value}M的图片!`)
    fileList2.value = []
  } else {
    fileList2.value = resfileList
  }
}
// 移除图片
const handleRemove = (file: any) => {
  const list = fileList0.value
  for (const i in list) {
    if (list[i].uid === file.uid) {
      list.splice(i, 1)
    }
  }
  fileList0.value = list
}
// 移除图片
const handleRemove1 = (file: any) => {
  const list = fileList1.value
  for (const i in list) {
    if (list[i].uid === file.uid) {
      list.splice(i, 1)
    }
  }
  fileList1.value = list
}
// 移除图片
const handleRemove2 = (file: any) => {
  const list = fileList2.value
  for (const i in list) {
    if (list[i].uid === file.uid) {
      list.splice(i, 1)
    }
  }
  fileList2.value = list
}
//  确定上传
const uploadFuc = async () => {
  loading.value = true
  // console.log(fileList0.value)
  if ((fileList0.value.length === 0 || fileList1.value.length === 0 || fileList2.value.length === 0) && isCard.value) {
    ElMessage.error("请上传相关照片")
    loading.value = false
    return
  }
  const fileData = new FormData()
  const fileData1 = new FormData()
  const fileData2 = new FormData()
  fileList0.value.forEach((file: any) => {
    fileData.append("file", file.raw)
    fileData.append("name", formData.cardName)
  })
  fileList1.value.forEach((file: any) => {
    fileData1.append("file", file.raw)
    fileData1.append("name", formData.cardName)
  })
  fileList2.value.forEach((file: any) => {
    fileData2.append("file", file.raw)
    fileData2.append("name", formData.cardName)
  })
  // const currentAge = Number(IdCard(formData.cardId, 3))
  // if (currentAge >= minAge.value && currentAge <= maxAge.value) {
  //   console.log("年龄核检通过")
  // } else {
  //   ElMessage.error(`年龄限制为${minAge.value}-${maxAge.value}周岁，请核对身份证信息是否正确！`)
  //   loading.value = false
  //   return
  // }
  if (isCard.value) {
    if (fileList0.value[0].status === "ready") {
      await uploadCidImageList(fileData).then((res: any) => {
        if (res.code == 200) {
          formData.cardFront = res.data.split("/image/")[1]
          fileList0.value = []
        }
      })
    }
    if (fileList1.value[0].status === "ready") {
      await uploadCidImageList(fileData1).then((res: any) => {
        if (res.code == 200) {
          formData.cardBack = res.data.split("/image/")[1]
          fileList1.value = []
        }
      })
    }
    if (fileList2.value[0].status === "ready") {
      await uploadCidImageList(fileData2).then((res: any) => {
        if (res.code == 200) {
          formData.photo = res.data.split("/image/")[1]
          fileList2.value = []
        }
      })
    }
  }
  // const inputArea = formData.takeAddress.trim().split(" ")
  // /**不发货省 */
  // if (noAreaP.value.length) {
  //   if (noAreaP.value.includes(inputArea[0])) {
  //     ElMessage.warning("填写的地址有误或在不发货地区喔！^-^")
  //     loading.value = false
  //     return
  //   }
  // }
  // /**不发货省市 */
  // // console.log(noAreaPandC.value)
  // if (noAreaPandC.value.length) {
  //   if (noAreaPandC.value.includes(`${inputArea[0]}${inputArea[1]}`)) {
  //     ElMessage.warning("填写的地址有误或在不发货地区喔！^-^")
  //     loading.value = false
  //     return
  //   }
  // }
  // /**不发货省市区 */
  // // console.log(noAreaFinallyArry.value)

  // if (noAreaFinallyArry.value.length) {
  //   if (noAreaFinallyArry.value.includes(`${inputArea[0]}${inputArea[1]}${inputArea[2]}`)) {
  //     ElMessage.warning("填写的地址有误或在不发货地区喔！^-^")
  //     loading.value = false
  //     return
  //   }
  // }
  // if (noField.value) {
  //   const regex = new RegExp(noField.value.split(",").join("|"))
  //   if (regex.test(formData.takeAddress)) {
  //     ElMessage.warning("填写的地址含有敏感词！^-^")
  //     loading.value = false
  //     return
  //   }
  // }

  if (currentUpdateId.value === undefined) {
    await createOrderDataApi(
      {
        orderId: formData.orderId,
        source: formData.source,
        handleMobile: formData.handleMobile,
        sku: formData.sku,
        cardName: formData.cardName,
        cardId: formData.cardId,
        consignee: formData.consignee,
        takeMobile: formData.takeMobile,
        takeAddress: formData.takeAddress,
        cardFront: formData.cardFront,
        cardBack: formData.cardBack,
        photo: formData.photo,
        wantWant: formData.wantWant,
        dyId: formData.dyId,
        isDiscard: formData.isDiscard,
        dlIsMoney: formData.dlIsMoney,
        dlMoney: formData.dlMoney,
        dlMoneyDate: formData.dlMoneyDate,
        salesman: formData.salesman,
        remark: formData.remark,
        chargingState: formData.chargingState,
        chargingDate: formData.chargingDate,
        result: formData.result,
        logisticsCompany: formData.logisticsCompany,
        logisticsId: formData.logisticsId,
        commissionState: formData.commissionState
      },
      userStore.usernameID,
      false
    )
      .then(() => {
        ElMessage.success("新增成功")
        dialogVisible.value = false
        getTableData()
      })
      .finally(() => {
        loading.value = false
      })
  } else {
    await update1OrderDataApi({
      id: currentUpdateId.value,
      orderId: formData.orderId,
      source: formData.source,
      iccid: formData.iccid,
      handleMobile: formData.handleMobile,
      sku: formData.sku,
      cardName: formData.cardName,
      cardId: formData.cardId,
      consignee: formData.consignee,
      takeMobile: formData.takeMobile,
      takeAddress: formData.takeAddress,
      note: formData.note,
      cardFront: formData.cardFront,
      cardBack: formData.cardBack,
      photo: formData.photo,
      salesman: formData.salesman,
      remark: formData.remark,
      state: formData.state,
      logisticsState: formData.logisticsState,
      commissionData: formData.commissionData,
      activeData: formData.activeData,
      chargingState: formData.chargingState,
      chargingDate: formData.chargingDate,
      result: formData.result,
      logisticsCompany: formData.logisticsCompany,
      logisticsId: formData.logisticsId,
      commissionState: formData.commissionState,
      update: formData.update,
      create: formData.create,
      // allData: formData.allData,
      active: formData.active,
      wantWant: formData.wantWant,
      dyId: formData.dyId,
      isDiscard: formData.isDiscard,
      dlIsMoney: formData.dlIsMoney,
      dlMoney: formData.dlMoney,
      dlMoneyDate: formData.dlMoneyDate,
      callBack: formData.callBack,
      superiorId: formData.superiorId,
      sourceRemark: formData.sourceRemark,
      superiorName: formData.superiorName
    })
      .then(() => {
        ElMessage.success("修改成功")
        dialogVisible.value = false
        getTableData()
      })
      .finally(() => {
        loading.value = false
      })
  }
}
/** 订单下载 默认下载所有数据，查询后下载所有符合查询条件的数据*/
const dialogVisible3 = ref<boolean>(false)
const downInfo = ref<any>([])
const formData1 = reactive<any>({
  download: ""
})
const resetForm1 = () => {
  formData1.download = ""
}
const formRules1: FormRules = reactive({
  download: [{ required: true, trigger: "blur", message: "请输入密码" }]
})
const downLoad = async () => {
  dialogVisible3.value = true
}
const handleDownLoad = () => {
  const salesman1 = ref<string>(searchData.salesman)
  if (salesman1.value !== "") {
    salesman1.value = searchData.salesman
      .split(",")
      .map((item: any) => {
        return "'" + item + "'"
      })
      .join(",")
  } else {
    salesman1.value = ""
  }
  // const basePW = commonStore.DOWNLOADWORD
  // if (formData1.download !== basePW) {
  //   ElMessage.error("密码错误，请重新输入！")
  //   formData1.download = ""
  // } else {
  downLoadOrderTable({
    source: searchData.source,
    department: searchData.department,
    cardName: searchData.cardName,
    orderOutId: searchData.orderOutId,
    handleMobile: searchData.handleMobile,
    cardId: searchData.cardId,
    takeMobile: searchData.takeMobile,
    sku: searchData.sku,
    start:
      searchData.searchDate && searchData.searchDate.length ? new Date(searchData?.searchDate[0]).getTime() : "" || "",
    end:
      searchData.searchDate && searchData.searchDate.length ? new Date(searchData?.searchDate[1]).getTime() : "" || "",
    state: searchData.state || 0,
    id: searchData.id,
    wantWant: searchData.wantWant,
    dyId: searchData.dyId,
    isDiscard: searchData.isDiscard,
    logisticsId: searchData.logisticsId,
    superName: searchData.superName,
    commissionState: searchData.commissionState,
    downpassword: formData1.download,
    salesman: salesman1.value
  }).then((res: any) => {
    const blob = new Blob([res.data], {
      type: "application/xlsx;charset=utf-8"
    })
    // console.log(res)
    const downloadElement = document.createElement("a")
    const href = window.URL.createObjectURL(blob)
    downloadElement.href = href
    downloadElement.download = "订单.xlsx"
    document.body.appendChild(downloadElement)
    downloadElement.click()
    window.URL.revokeObjectURL(href)
    dialogVisible3.value = false
    formData1.download = ""
  })
}
// }

/**批量重提 */
//批量选择
const selectedIds = ref<string[]>([])
const pushSuccInfo = ref<boolean>(false)
const tableRef = ref<any>(null)
const pushInfo = ref<any>(null)
const handleSelectionChange = (val: any) => {
  const arr = ref<string[]>([])
  if (val.length) {
    val.forEach((item: any) => {
      arr.value.push(item.id)
    })
  }
  selectedIds.value = arr.value
  // console.log(arr.value)
}
//提交

const submitPush = () => {
  if (selectedIds.value.length)
    againPush({ orderList: selectedIds.value })
      .then((res: any) => {
        loading.value = true
        // console.log(res)
        if (res.code == 200) {
          pushSuccInfo.value = true
          pushInfo.value = res
          getTableData()
        }
      })
      .finally(() => {
        tableRef.value?.clearSelection()
        loading.value = false
      })
}

const comboAll = () => {
  getComboDataApi10({
    page: 1,
    size: 10000,
    state: "",
    team: ""
  }).then((res: any) => {
    comboList.value = res.data
  })
}
comboAll()

/**END */
/** 订单下载 END*/

/** 监听分页参数的变化 */
watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true })
/** 监听套餐数据是否变化 */
watch([() => formData.sku], (newValue) => comboChange(newValue.join()))
/**监听套餐缓存(pinia) */
comboStore.getComoboFn()
const comboList1 = ref<any>([])
watch(
  [() => comboStore.comboListStore],
  (newValue) => {
    // comboList.value = newValue.flat()
    comboList1.value = newValue.flat().filter((item) => item.state === "true")
  },
  {
    immediate: true
  }
)
/**E N D */

/**监听代理账号缓存(pinia) */
import { useReStore } from "@/store/modules/reId"
const reStore = useReStore()
reStore.getReFn()
const reList = ref<any>([])
watch(
  [() => reStore.reListStore],
  (newValue) => {
    reList.value = newValue.flat()
  },
  {
    immediate: true
  }
)
/**E N D */

// ** 清除规则报错信息
const clearValidate = () => {
  formRef.value?.clearValidate()
}
const defaultTime1: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]
/**抖音直播间ID获取 */
const dyLive = ref<any>([])
const getDy = () => {
  getDyLive({
    page: 1,
    size: 100
  })
    .then((res) => {
      dyLive.value = res.data.map((item: any) => {
        return {
          dyName: `${item.dyId}-${item.dyName}`,
          dyId: item.dyId
        }
      })
    })
    .catch(() => {
      dyLive.value = []
    })
}
getDy()
</script>

<template>
  <div class="app-container">
    <el-card v-loading="loading" shadow="never" class="search-wrapper">
      <el-form ref="searchFormRef" :inline="true" :model="searchData">
        <el-form-item prop="id" label="订单ID">
          <el-input v-model.trim="searchData.id" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="orderOutId" label="订单外部ID">
          <el-input v-model.trim="searchData.orderOutId" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="wantWant" label="旺旺号">
          <el-input v-model.trim="searchData.wantWant" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="isDiscard" label="是否废单">
          <!-- <el-input v-model.trim="searchData.isDiscard" placeholder="请输入" /> -->
          <el-select v-model="searchData.isDiscard" clearable placeholder="请选择是否废单" style="width: 240px">
            <el-option key="02110" label="是" value="是" />
            <el-option key="02111" label="否" value="否" />
          </el-select>
        </el-form-item>
        <el-form-item prop="cardName" label="身份证名字">
          <el-input v-model.trim="searchData.cardName" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="cardId" label="身份证号">
          <el-input v-model.trim="searchData.cardId" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="handleMobile" label="办理手机号">
          <el-input v-model.trim="searchData.handleMobile" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="takeMobile" label="收件电话">
          <el-input v-model.trim="searchData.takeMobile" placeholder="请输入" />
        </el-form-item>
        <!-- <el-form-item prop="source" label="订单来源" v-if="!userStore.teamName">
          <el-input v-model.trim="searchData.source" placeholder="请输入" />
        </el-form-item> -->
        <el-form-item prop="superName" label="上级名" v-if="!userStore.teamName">
          <el-input v-model.trim="searchData.superName" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="salesman" label="发展业务员">
          <el-input v-model.trim="searchData.salesman" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="logisticsId" label="物流单号">
          <el-input v-model.trim="searchData.logisticsId" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="re_id" label="推荐人">
          <el-select v-model="searchData.re_id" clearable filterable placeholder="请选推荐人" style="width: 240px">
            <el-option v-for="item in reList" :key="item.user_id" :label="item.user_name" :value="item.user_id" />
          </el-select>
        </el-form-item>
        <el-form-item prop="dyId" label="抖音直播间">
          <el-select v-model="searchData.dyId" clearable filterable placeholder="请选择" style="width: 240px">
            <el-option v-for="item in dyLive" :key="item.dyId" :label="item.dyName" :value="item.dyId" />
          </el-select>
        </el-form-item>
        <el-form-item prop="sku" label="套餐">
          <el-select v-model="searchData.sku" clearable placeholder="请选套餐" filterable style="width: 240px">
            <el-option v-for="item in comboList" :key="item.id" :label="item.name" :value="item.id + ''" />
          </el-select>
        </el-form-item>
        <el-form-item prop="state" label="订单状态">
          <el-select v-model="searchData.state" clearable placeholder="请选择" style="width: 240px">
            <el-option v-for="item in codeList" :key="item.code" :label="item.state" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item prop="commissionState" label="结佣状态">
          <el-input v-model.trim="searchData.commissionState" placeholder="请输入" />
        </el-form-item>

        <el-form-item prop="searchDate" label="订单日期">
          <el-date-picker
            v-model="searchData.searchDate"
            type="datetimerange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :shortcuts="shortcuts"
            :size="sizeDate"
            :default-time="defaultTime1"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
          <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card v-loading="loading" shadow="never">
      <div class="toolbar-wrapper">
        <div>
          <el-button style="vertical-align: top" class="ml-3" type="success" icon="EditPen" @click="submitEdit">
            批量修改
          </el-button>

          <el-button style="vertical-align: top" class="ml-3" type="danger" icon="Upload" @click="submitAgain">
            批量重提</el-button
          >
          <el-button
            title="向下级系统重新推送"
            style="vertical-align: top"
            class="ml-3"
            type="primary"
            :icon="Download"
            @click="submitPush"
          >
            批量重推
          </el-button>
        </div>
        <div>
          <el-tooltip content="下载">
            <el-button type="primary" :icon="Download" circle @click="downLoad" />
          </el-tooltip>
          <el-tooltip content="刷新表格">
            <el-button type="primary" :icon="RefreshRight" circle @click="handleRefresh" />
          </el-tooltip>
        </div>
      </div>

      <div class="table-wrapper">
        <el-table :data="tableData" ref="tableRef" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column prop="id" label="ID" align="center" />
          <el-table-column prop="orderId" label="外部ID" align="center" />
          <el-table-column prop="create" label="创建时间" align="center">
            <template #default="scope">
              {{ formatDateTime(scope.row.create) }}
            </template>
          </el-table-column>
          <el-table-column prop="update" label="反馈时间" align="center">
            <template #default="scope">
              {{ formatDateTime(scope.row.update) }}
            </template>
          </el-table-column>
          <el-table-column prop="source" label="订单来源" align="center" />
          <el-table-column prop="reName" label="推荐人" align="center" />
          <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip />
          <el-table-column prop="sku" label="套餐" align="center" :formatter="formatterCombo" width="200" />
          <el-table-column prop="handleMobile" label="入网号" align="center" />
          <!-- <el-table-column prop="iccid" label="ICCID" align="center" /> -->
          <el-table-column prop="cardName" label="姓名" align="center" />
          <el-table-column prop="cardId" label="身份证号" align="center" />
          <el-table-column prop="consignee" label="收货人" align="center" />
          <el-table-column prop="takeMobile" label="收货电话" align="center" />
          <el-table-column prop="takeAddress" label="收货地址" align="center" show-overflow-tooltip />
          <el-table-column label="订单状态" align="center">
            <template #default="scope">
              <div
                :class="{
                  doing: scope.row.state?.code <= 200 && scope.row.state?.code > 199,
                  success: scope.row.state?.code >= 100 && scope.row.state?.code < 200,
                  error: scope.row.state?.code >= 400,
                  again: scope.row.state?.code < 0
                }"
              >
                {{ scope.row.state?.state }}
                <div class="text-ellipsis" v-if="scope.row.result" style="font-size: 12px">
                  <el-tooltip placement="top">
                    <template #content> {{ scope.row.result }} </template>
                    <span style="cursor: pointer">({{ scope.row.result }})</span>
                  </el-tooltip>
                </div>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column label="物流状态" align="center" show-overflow-tooltip>
            <template #default="scope">
              {{ scope.row?.logisticsState?.str }}
            </template>
          </el-table-column> -->
          <el-table-column prop="logisticsId" label="物流单号" align="center" />
          <el-table-column prop="logisticsCompany" label="物流公司" align="center" />
          <el-table-column prop="chargingState" label="充值情况" align="center" show-overflow-tooltip />
          <el-table-column prop="commissionState" label="佣金状态" align="center" show-overflow-tooltip />
          <!-- <el-table-column prop="re_super" label="推荐人(上级)" align="center" v-if="!userStore.teamName" />
          <el-table-column prop="re_upup" label="推荐人(上上级)" align="center" v-if="!userStore.teamName" /> -->
          <el-table-column prop="superiorName" label="上级名" align="center" v-if="!userStore.teamName">
            <template #default="scope">
              <span v-if="scope.row.sourceRemark">{{ scope.row.sourceRemark }}</span>
              <sapn v-else>{{ scope.row.superiorName }}</sapn>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100" align="center">
            <template #default="scope">
              <el-button type="primary" text bg size="small" @click="handleUpdate(scope.row)">修改</el-button
              ><br /><br />
              <el-button type="primary" text bg size="small" @click="handleSeeMore(scope.row)"> 查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pager-wrapper">
        <el-pagination
          background
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :total="paginationData.total"
          :page-size="paginationData.pageSize"
          :currentPage="paginationData.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 新增/修改 -->
    <el-dialog
      v-model="dialogVisible"
      :title="seeState === 'see' ? '查看详情' : currentUpdateId === undefined ? '新增订单' : '修改订单'"
      @close="resetForm"
      width="80%"
      v-if="seeState !== 'data' && seeState !== 'dataShow'"
    >
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" label-position="left">
        <el-row :gutter="12" v-if="seeState == 'see'">
          <el-col :span="6">
            <div style="text-align: center; margin-bottom: 10px">
              <el-text type="primary" size="large">订单信息</el-text>
            </div>
            <el-card shadow="always" :body-style="{ height: '600px' }">
              <el-form-item prop="currentUpdateId" label="订单ID">
                <el-input v-model="currentUpdateId" placeholder="请输入" :disabled="seeState === 'see'" />
              </el-form-item>
              <el-form-item prop="orderId" label="订单外部ID">
                <el-input v-model="formData.orderId" placeholder="请输入" :disabled="seeState === 'see'" />
              </el-form-item>
              <el-form-item prop="source" label="订单来源">
                <el-input v-model="formData.source" placeholder="请输入" disabled />
              </el-form-item>
              <el-form-item prop="recorder" label="录单员" v-if="seeState === 'see'">
                <el-input v-model="formData.recorder" placeholder="请输入" disabled />
              </el-form-item>
              <el-form-item prop="wantWant" label="旺旺号">
                <el-input v-model="formData.wantWant" placeholder="请输入" disabled />
              </el-form-item>
              <el-form-item prop="recorder" label="发展业务员">
                <el-input v-model="formData.salesman" placeholder="请输入" :disabled="seeState === 'see'" />
              </el-form-item>
              <el-form-item
                prop="dyId"
                label="抖音直播间"
                v-if="userStore.roles[0] == '抖音小店文员' || userStore.roles[0] == '超级管理员'"
              >
                <el-select
                  v-model="formData.dyId"
                  clearable
                  filterable
                  placeholder="请选择"
                  style="width: 240px"
                  disabled
                >
                  <el-option v-for="item in dyLive" :key="item.dyId" :label="item.dyName" :value="item.dyId" />
                </el-select>
              </el-form-item>
              <el-form-item prop="isDiscard" label="是否废单">
                <el-select
                  v-model="formData.isDiscard"
                  clearable
                  filterable
                  placeholder="请选择"
                  style="width: 240px"
                  :disabled="seeState === 'see'"
                >
                  <el-option key="02110" label="否" value="否" />
                  <el-option key="02111" label="是" value="是" />
                </el-select>
              </el-form-item>
              <el-form-item prop="recorder" label="备注">
                <el-input v-model="formData.remark" placeholder="请输入" :disabled="seeState === 'see'" />
              </el-form-item>
            </el-card>
          </el-col>
          <el-col :span="6">
            <div style="text-align: center; margin-bottom: 10px">
              <el-text type="primary" size="large">下单信息</el-text>
            </div>
            <el-card shadow="hover" :body-style="{ height: '600px' }">
              <el-scrollbar height="550px">
                <el-form-item prop="handleMobile" label="入网号">
                  <el-input
                    v-model="formData.handleMobile"
                    :disabled="seeState === 'see'"
                    placeholder="请输入"
                    maxlength="11"
                    show-word-limit
                  />
                </el-form-item>
                <el-form-item prop="iccid" label="ICCID">
                  <el-input v-model="formData.iccid" :disabled="seeState === 'see'" placeholder="请输入" />
                </el-form-item>
                <el-form-item prop="sku" label="订购的套餐">
                  <el-input type="textarea" disabled v-if="seeState === 'see'" v-model="comboStr" />
                  <el-select
                    v-else
                    v-model="formData.sku"
                    clearable
                    filterable
                    placeholder="请选套餐,可输入快速查询"
                    style="width: 100%"
                    @change="comboChange"
                  >
                    <!-- :value="item.id + ''" -->
                    <el-option
                      v-for="item in comboList1"
                      :key="item.id"
                      :label="item.name"
                      :value="String(item.id)"
                      :disabled="item.state === 'false'"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item prop="consignee" label="收货人">
                  <el-input v-model="formData.consignee" :disabled="seeState === 'see'" placeholder="请输入" />
                </el-form-item>
                <el-form-item prop="takeMobile" label="收货电话">
                  <el-input
                    v-model="formData.takeMobile"
                    :disabled="seeState === 'see'"
                    placeholder="请输入"
                    maxlength="11"
                    show-word-limit
                  />
                  <el-tooltip class="box-item" effect="customized" placement="bottom">
                    <template #content> 为保证用户个人信息安全，该字段进行加密处理，如需解密，请点击 </template>
                    <el-icon style="cursor: pointer"><InfoFilled /></el-icon>
                  </el-tooltip>
                  <el-link @click="handleDecrypt('takeMobile')">收货电话解密</el-link>
                </el-form-item>
                <el-form-item prop="takeAddress">
                  <template #label>
                    <span>收货地址</span>
                  </template>
                  <el-input
                    v-model="formData.takeAddress"
                    type="textarea"
                    :disabled="seeState === 'see'"
                    placeholder=" 地址格式：河南省 焦作市 山阳区 某某小区某某楼503"
                  />
                  <el-tooltip class="box-item" effect="customized" placement="bottom">
                    <template #content> 为保证用户个人信息安全，该字段进行加密处理，如需解密，请点击 </template>
                    <el-icon style="cursor: pointer"><InfoFilled /></el-icon>
                  </el-tooltip>
                  <el-link @click="handleDecrypt('address')">收货地址解密</el-link>
                </el-form-item>
                <el-form-item prop="cardName" label="身份证姓名">
                  <el-input v-model="formData.cardName" :disabled="seeState === 'see'" placeholder="请输入" />
                  <el-tooltip class="box-item" effect="customized" placement="bottom">
                    <template #content> 为保证用户个人信息安全，该字段进行加密处理，如需解密，请点击 </template>
                    <el-icon style="cursor: pointer"><InfoFilled /></el-icon>
                  </el-tooltip>
                  <el-link @click="handleDecrypt('cardName')">身份证姓名解密</el-link>
                </el-form-item>
                <el-form-item prop="cardId" label="身份证号">
                  <el-input
                    v-model="formData.cardId"
                    :disabled="seeState === 'see'"
                    placeholder="请输入"
                    maxlength="18"
                    show-word-limit
                  />
                  <el-tooltip class="box-item" effect="customized" placement="bottom">
                    <template #content> 为保证用户个人信息安全，该字段进行加密处理，如需解密，请点击 </template>
                    <el-icon style="cursor: pointer"><InfoFilled /></el-icon>
                  </el-tooltip>
                  <el-link @click="handleDecrypt('icard')">身份证号解密</el-link>
                </el-form-item>
                <el-form-item v-if="isCard" prop="cardFront" label="身份证正面照">
                  <el-upload
                    :auto-upload="false"
                    :file-list="fileList0"
                    :show-file-list="true"
                    list-type="picture-card"
                    :limit="1"
                    accept="image/*"
                    :on-change="handleChageImg"
                    :disabled="fileList0.length !== 0"
                  >
                    <el-icon><Plus /></el-icon>
                    <template #file="{ file }">
                      <div>
                        <img class="el-upload-list__item-thumbnail" :src="file.url" />
                        <span class="el-upload-list__item-actions">
                          <span
                            class="el-upload-list__item-delete"
                            @click="handleRemove(file)"
                            v-if="seeState !== 'see'"
                          >
                            <el-icon>
                              <Delete />
                            </el-icon>
                          </span>
                        </span>
                      </div>
                    </template>
                  </el-upload>
                </el-form-item>
                <el-form-item v-if="isCard" prop="cardBack" label="身份证反面照">
                  <el-upload
                    :auto-upload="false"
                    :file-list="fileList1"
                    :show-file-list="true"
                    list-type="picture-card"
                    :limit="1"
                    accept="image/*"
                    :on-change="handleChageImg1"
                    :disabled="fileList1.length !== 0"
                  >
                    <el-icon><Plus /></el-icon>
                    <template #file="{ file }">
                      <div>
                        <img class="el-upload-list__item-thumbnail" :src="file.url" />
                        <span class="el-upload-list__item-actions">
                          <span
                            class="el-upload-list__item-delete"
                            @click="handleRemove1(file)"
                            v-if="seeState !== 'see'"
                          >
                            <el-icon>
                              <Delete />
                            </el-icon>
                          </span>
                        </span>
                      </div>
                    </template>
                  </el-upload>
                </el-form-item>
                <el-form-item v-if="isCard" prop="photo" label="人像照片">
                  <el-upload
                    :auto-upload="false"
                    :file-list="fileList2"
                    :show-file-list="true"
                    list-type="picture-card"
                    :limit="1"
                    accept="image/*"
                    :on-change="handleChageImg2"
                    :disabled="fileList2.length !== 0"
                  >
                    <el-icon><Plus /></el-icon>
                    <template #file="{ file }">
                      <div>
                        <img class="el-upload-list__item-thumbnail" :src="file.url" />
                        <span class="el-upload-list__item-actions">
                          <span
                            class="el-upload-list__item-delete"
                            @click="handleRemove2(file)"
                            v-if="seeState !== 'see'"
                          >
                            <el-icon>
                              <Delete />
                            </el-icon>
                          </span>
                        </span>
                      </div>
                    </template>
                  </el-upload>
                </el-form-item>
              </el-scrollbar>
            </el-card>
          </el-col>
          <el-col :span="6">
            <div style="text-align: center; margin-bottom: 10px">
              <el-text type="primary" size="large">物流信息</el-text>
            </div>
            <el-card shadow="never" :body-style="{ height: '600px' }">
              <el-form-item prop="logisticsState" label="物流状态">
                <el-select
                  v-model="formData.logisticsState"
                  clearable
                  placeholder="请选择"
                  style="width: 240px"
                  :disabled="seeState === 'see'"
                >
                  <el-option v-for="item in logSticList" :key="item.code" :label="item.state" :value="item.code" />
                </el-select>
              </el-form-item>
              <el-form-item prop="logisticsId" label="物流单号">
                <el-input v-model="formData.logisticsId" :disabled="seeState === 'see'" placeholder="请输入" />
              </el-form-item>
              <el-form-item prop="logisticsCompany" label="物流公司">
                <el-input v-model="formData.logisticsCompany" :disabled="seeState === 'see'" placeholder="请输入" />
              </el-form-item>
            </el-card>
          </el-col>
          <el-col :span="6">
            <div style="text-align: center; margin-bottom: 10px">
              <el-text type="primary" size="large">跟进信息</el-text>
            </div>
            <el-card shadow="never" :body-style="{ height: '600px' }">
              <el-scrollbar height="550px">
                <el-form-item prop="state" label="订单状态">
                  <el-select
                    v-model="formData.state"
                    clearable
                    placeholder="请选择"
                    style="width: 240px"
                    :disabled="seeState === 'see'"
                  >
                    <el-option v-for="item in codeList" :key="item.code" :label="item.state" :value="item.code" />
                  </el-select>
                </el-form-item>
                <el-form-item prop="chargingState" label="充值情况" v-if="seeState === 'see'">
                  <el-input
                    autosize
                    type="textarea"
                    :disabled="seeState === 'see'"
                    v-model="formData.chargingState"
                    placeholder="请输入"
                  />
                </el-form-item>
                <el-form-item prop="chargingDate" label="充值时间" v-if="seeState === 'see'">
                  <el-date-picker
                    v-model="payDate"
                    :disabled="seeState === 'see'"
                    type="datetime"
                    placeholder="请选择时间"
                  />
                </el-form-item>
                <el-form-item prop="result" label="结果描述" v-if="seeState === 'see'">
                  <el-input
                    v-model="formData.result"
                    :disabled="seeState === 'see'"
                    autosize
                    type="textarea"
                    placeholder="请输入"
                  />
                </el-form-item>
                <el-form-item prop="activeData" label="激活数据" v-if="seeState === 'see'">
                  <el-input
                    v-model="formData.activeData"
                    type="textarea"
                    placeholder="请输入"
                    :disabled="seeState === 'see'"
                  />
                </el-form-item>
                <el-form-item prop="active" label="激活时间" v-if="seeState === 'see'">
                  <el-input v-model="formData.active" placeholder="请输入" :disabled="seeState === 'see'" />
                </el-form-item>
                <el-form-item prop="commissionData" label="结佣数据" v-if="seeState === 'see'">
                  <el-input
                    v-model="formData.commissionData"
                    type="textarea"
                    placeholder="请输入"
                    :disabled="seeState === 'see'"
                  />
                </el-form-item>
                <el-form-item prop="commissionState" label="佣金状态" v-if="seeState === 'see'">
                  <el-input
                    v-model="formData.commissionState"
                    :disabled="seeState === 'see'"
                    type="textarea"
                    autosize
                    placeholder="请输入"
                  />
                </el-form-item>
                <p>(代理)</p>
                <el-form-item prop="dlIsMoney" label="是否结算佣金">
                  <!-- <el-input v-model="formData.dlIsMoney" :disabled="seeState === 'see'" placeholder="请输入" /> -->
                  <el-select
                    v-model="formData.dlIsMoney"
                    clearable
                    filterable
                    placeholder="请选择"
                    style="width: 240px"
                    :disabled="seeState === 'see'"
                  >
                    <el-option key="02110" label="否" value="否" />
                    <el-option key="02111" label="是" value="是" />
                  </el-select>
                </el-form-item>
                <el-form-item prop="dlMoney" label="结算佣金金额">
                  <el-input
                    v-model="formData.dlMoney"
                    style="width: 240px"
                    :disabled="seeState === 'see'"
                    placeholder="请输入"
                  />
                </el-form-item>
                <el-form-item prop="dlMoneyDate" label="结算佣金时间">
                  <!-- <el-input v-model="formData.dlMoneyDate" :disabled="seeState === 'see'" placeholder="请输入" /> -->
                  <el-date-picker
                    style="width: 240px"
                    v-model="formData.dlMoneyDate"
                    :disabled="seeState === 'see'"
                    type="datetime"
                    placeholder="请选择时间"
                  />
                </el-form-item>
              </el-scrollbar>
            </el-card>
          </el-col>
        </el-row>
        <div v-if="seeState !== 'see'">
          <el-form-item prop="orderId" label="订单外部ID">
            <el-input v-model="formData.orderId" placeholder="请输入" :disabled="seeState === 'see'" />
          </el-form-item>
          <el-form-item prop="source" label="订单来源">
            <el-input v-model="formData.source" placeholder="请输入" disabled />
          </el-form-item>
          <el-form-item prop="recorder" label="录单员" v-if="seeState === 'see'">
            <el-input v-model="formData.recorder" placeholder="请输入" />
          </el-form-item>
          <el-form-item prop="wantWant" label="旺旺号">
            <el-input
              v-model="formData.wantWant"
              placeholder="请输入"
              show-word-limit
              maxlength="25"
              :disabled="seeState === 'see'"
            />
          </el-form-item>
          <el-form-item prop="recorder" label="发展业务员">
            <el-input v-model="formData.salesman" placeholder="请输入" :disabled="seeState === 'see'" />
          </el-form-item>
          <el-form-item
            prop="dyId"
            label="抖音直播间"
            v-if="userStore.roles[0] == '抖音小店文员' || userStore.roles[0] == '超级管理员'"
          >
            <el-select v-model="formData.dyId" clearable filterable placeholder="请选择" style="width: 240px">
              <el-option v-for="item in dyLive" :key="item.dyId" :label="item.dyName" :value="item.dyId" />
            </el-select>
          </el-form-item>
          <el-form-item prop="recorder" label="备注">
            <el-input v-model="formData.remark" placeholder="请输入" :disabled="seeState === 'see'" />
          </el-form-item>
          <el-form-item prop="state" label="订单状态" v-if="seeState !== 'add'">
            <!-- <el-input v-model="searchData.sku" placeholder="请输入" /> -->
            <el-select
              v-model="formData.state"
              clearable
              placeholder="请选择"
              style="width: 240px"
              :disabled="seeState === 'see'"
            >
              <el-option v-for="item in codeList" :key="item.code" :label="item.state" :value="item.code" />
            </el-select>
          </el-form-item>
          <el-form-item prop="sku" label="订购的套餐">
            <el-input type="textarea" disabled v-if="seeState === 'see'" v-model="comboStr" />
            <el-select
              v-else
              v-model="formData.sku"
              clearable
              filterable
              placeholder="请选套餐,可输入快速查询"
              style="width: 100%"
              @change="comboChange"
            >
              <el-option
                v-for="item in comboList1"
                :key="item.id"
                :label="item.name"
                :value="item.id + ''"
                :disabled="item.state === 'false'"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="isDiscard" label="是否废单">
            <el-select
              v-model="formData.isDiscard"
              clearable
              filterable
              placeholder="请选择"
              style="width: 240px"
              :disabled="seeState === 'see'"
            >
              <el-option key="02110" label="否" value="否" />
              <el-option key="02111" label="是" value="是" />
            </el-select>
          </el-form-item>
          <el-form-item prop="handleMobile" label="入网号" v-if="seeState !== 'add'">
            <el-input
              v-model="formData.handleMobile"
              :disabled="seeState === 'see'"
              placeholder="请输入"
              maxlength="11"
              show-word-limit
            />
          </el-form-item>
          <el-form-item prop="iccid" label="ICCID" v-if="seeState !== 'add'">
            <el-input v-model="formData.iccid" :disabled="seeState === 'see'" placeholder="请输入" />
          </el-form-item>
          <el-form-item prop="cardName" label="身份证姓名">
            <el-input v-model="formData.cardName" :disabled="seeState === 'see'" placeholder="请输入" />
          </el-form-item>
          <el-form-item prop="cardId" label="身份证号">
            <el-input
              v-model="formData.cardId"
              :disabled="seeState === 'see'"
              placeholder="请输入"
              maxlength="18"
              show-word-limit
            />
          </el-form-item>
          <el-form-item prop="chargingState" label="充值情况" v-if="seeState !== 'add'">
            <el-input
              autosize
              type="textarea"
              :disabled="seeState === 'see'"
              v-model="formData.chargingState"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item prop="chargingDate" label="充值时间" v-if="seeState !== 'add'">
            <el-date-picker v-model="payDate" :disabled="seeState === 'see'" type="datetime" placeholder="请选择时间" />
          </el-form-item>
          <el-form-item prop="result" label="结果描述" v-if="seeState !== 'add'">
            <el-input
              v-model="formData.result"
              :disabled="seeState === 'see'"
              autosize
              type="textarea"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item prop="logisticsState" label="物流状态" v-if="seeState !== 'add'">
            <el-select
              v-model="formData.logisticsState"
              clearable
              placeholder="请选择"
              style="width: 240px"
              :disabled="seeState === 'see'"
            >
              <el-option v-for="item in logSticList" :key="item.code" :label="item.state" :value="item.code" />
            </el-select>
          </el-form-item>
          <el-form-item prop="logisticsCompany" label="物流公司" v-if="seeState !== 'add'">
            <!-- <el-input v-model="formData.logisticsCompany" :disabled="seeState === 'see'" placeholder="请输入" /> -->
            <el-select
              v-model="formData.logisticsCompany"
              placeholder="请选择物流公司"
              :disabled="seeState === 'see'"
              clearable
            >
              <el-option label="无需物流" value="无需物流" />
              <el-option label="顺丰快递" value="顺丰快递" />
              <el-option label="邮政EMS" value="邮政EMS" />
              <el-option label="韵达快递" value="韵达快递" />
              <el-option label="申通快递" value="申通快递" />
              <el-option label="圆通快递" value="圆通快递" />
              <el-option label="中通快递" value="中通快递" />
              <el-option label="天天快递" value="天天快递" />
              <el-option label="汇通快递" value="汇通快递" />
              <el-option label="宅急送" value="宅急送" />
              <el-option label="时间管理者" value="时间管理者" />
              <el-option label="客户自提" value="客户自提" />
              <el-option label="邮政电商小包" value="邮政电商小包" />
              <el-option label="重庆华宇" value="重庆华宇" />
              <el-option label="全峰物流" value="全峰物流" />
              <el-option label="百世快递" value="百世快递" />
              <el-option label="随机物流" value="随机物流" />
              <el-option label="京东物流" value="京东物流" />
              <el-option label="京广速递" value="京广速递" />
              <el-option label="丹乌快递" value="丹乌快递" />
            </el-select>
          </el-form-item>
          <el-form-item prop="logisticsId" label="物流单号" v-if="seeState !== 'add'">
            <el-input v-model="formData.logisticsId" :disabled="seeState === 'see'" placeholder="请输入" />
          </el-form-item>
          <el-form-item prop="activeData" label="激活数据" v-if="seeState !== 'add'">
            <el-input
              v-model="formData.activeData"
              type="textarea"
              placeholder="请输入"
              :disabled="seeState === 'see'"
            />
          </el-form-item>
          <el-form-item prop="commissionData" label="结佣数据" v-if="seeState !== 'add'">
            <el-input
              v-model="formData.commissionData"
              type="textarea"
              placeholder="请输入"
              :disabled="seeState === 'see'"
            />
          </el-form-item>
          <el-form-item prop="commissionState" label="佣金状态" v-if="seeState !== 'add'">
            <el-input
              v-model="formData.commissionState"
              :disabled="seeState === 'see'"
              type="textarea"
              autosize
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item prop="consignee" label="收货人">
            <el-input v-model="formData.consignee" :disabled="seeState === 'see'" placeholder="请输入" />
          </el-form-item>
          <el-form-item prop="takeMobile" label="收货电话">
            <el-input
              v-model="formData.takeMobile"
              :disabled="seeState === 'see'"
              placeholder="请输入"
              maxlength="11"
              show-word-limit
            />
          </el-form-item>
          <el-form-item prop="takeAddress">
            <template #label>
              <span>收货地址</span>
              <el-tooltip class="box-item" effect="customized" placement="bottom">
                <template #content>
                  地址格式：某某省 某某市 某某区 详细地址<br />
                  例如 河南省 焦作市 山阳区 某某小区某某楼503<br />
                  格式不正确不予通过
                </template>
                <el-icon style="cursor: pointer"><InfoFilled /></el-icon>
              </el-tooltip>
            </template>
            <el-input v-model="formData.takeAddress" :disabled="seeState === 'see'" placeholder="请按照提示格式填写" />
          </el-form-item>
          <p>(代理)</p>
          <el-form-item prop="dlIsMoney" label="是否结算佣金">
            <!-- <el-input v-model="formData.dlIsMoney" :disabled="seeState === 'see'" placeholder="请输入" /> -->
            <el-select
              v-model="formData.dlIsMoney"
              clearable
              filterable
              placeholder="请选择"
              style="width: 240px"
              :disabled="seeState === 'see'"
            >
              <el-option key="02110" label="否" value="否" />
              <el-option key="02111" label="是" value="是" />
            </el-select>
          </el-form-item>
          <el-form-item prop="dlMoney" label="结算佣金金额">
            <el-input
              v-model="formData.dlMoney"
              style="width: 240px"
              :disabled="seeState === 'see'"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item prop="dlMoneyDate" label="结算佣金时间">
            <!-- <el-input v-model="formData.dlMoneyDate" :disabled="seeState === 'see'" placeholder="请输入" /> -->
            <el-date-picker
              style="width: 240px"
              v-model="formData.dlMoneyDate"
              :disabled="seeState === 'see'"
              type="datetime"
              placeholder="请选择时间"
            />
          </el-form-item>
          <el-form-item v-if="isCard" prop="cardFront" label="身份证正面照">
            <el-upload
              :auto-upload="false"
              :file-list="fileList0"
              :show-file-list="true"
              list-type="picture-card"
              :limit="1"
              accept="image/*"
              :on-change="handleChageImg"
              :disabled="fileList0.length !== 0"
            >
              <el-icon><Plus /></el-icon>
              <template #file="{ file }">
                <div>
                  <img class="el-upload-list__item-thumbnail" :src="file.url" />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-delete" @click="handleRemove(file)" v-if="seeState !== 'see'">
                      <el-icon>
                        <Delete />
                      </el-icon>
                    </span>
                  </span>
                </div>
              </template>
            </el-upload>
          </el-form-item>
          <el-form-item v-if="isCard" prop="cardBack" label="身份证反面照">
            <el-upload
              :auto-upload="false"
              :file-list="fileList1"
              :show-file-list="true"
              list-type="picture-card"
              :limit="1"
              accept="image/*"
              :on-change="handleChageImg1"
              :disabled="fileList1.length !== 0"
            >
              <el-icon><Plus /></el-icon>
              <template #file="{ file }">
                <div>
                  <img class="el-upload-list__item-thumbnail" :src="file.url" />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-delete" @click="handleRemove1(file)" v-if="seeState !== 'see'">
                      <el-icon>
                        <Delete />
                      </el-icon>
                    </span>
                  </span>
                </div>
              </template>
            </el-upload>
          </el-form-item>
          <el-form-item v-if="isCard" prop="photo" label="人像照片">
            <el-upload
              :auto-upload="false"
              :file-list="fileList2"
              :show-file-list="true"
              list-type="picture-card"
              :limit="1"
              accept="image/*"
              :on-change="handleChageImg2"
              :disabled="fileList2.length !== 0"
            >
              <el-icon><Plus /></el-icon>
              <template #file="{ file }">
                <div>
                  <img class="el-upload-list__item-thumbnail" :src="file.url" />
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-delete" @click="handleRemove2(file)" v-if="seeState !== 'see'">
                      <el-icon>
                        <Delete />
                      </el-icon>
                    </span>
                  </span>
                </div>
              </template>
            </el-upload>
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false" v-if="seeState !== 'see'">取消</el-button>
        <el-button type="primary" @click="handleCreate" v-if="seeState !== 'see'" :disabled="loading">确认</el-button>
      </template>
    </el-dialog>
    <!-- 批量下载 -->
    <el-dialog v-model="dialogVisible3" title="下载密码" @close="resetForm1" width="50%">
      <el-form ref="formRef" :model="formData1" :rules="formRules1" label-width="100px" label-position="left">
        <el-form-item prop="download" label="下载密码">
          <el-input v-model="formData1.download" placeholder="请输入下载密码" type="password" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible3 = false">取消</el-button>
        <el-button type="primary" @click="handleDownLoad">确认</el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="updateInform" title="批量修改注意事项" width="50%">
      <div class="pbox">
        <p>1.首先将需要修改的数据下载下来</p>
        <p>2.在下载的数据基础上进行修改,表头带*的为必填字段不能为空,订单ID与订单外部ID不可修改</p>
        <p>3.订购的套餐名称需要改成对应的套餐ID</p>
        <p>4.物流状态需要改成对应的code</p>
        <p>
          4.1物流状态code：<br />
          未发货 ： 0
          <br />已发货 ： 1 <br />
          拒签 ：2 <br />已签收 ：3
        </p>
        <p>5.订单状态需要改成对应的code</p>
        <p>
          5.1订单状态code：<br />失败已重提 ： -1 <br />受理成功 ： 100 <br />
          已激活 ：102 <br />
          处理中 ：200 <br />
          受理失败 ：400 <br />
          未提交 ：401 <br />
          提交失败 ：402
        </p>
        <p>6.日期格式：yyyy-MM-dd 例如 2023-08-01</p>
      </div>

      <template #footer>
        <el-button @click="updateInform = false">取消</el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="updateSuccInfo" title="数据统计" width="50%">
      <div class="pbox">
        <p>1.时间：{{ updateInfo.time }}</p>
        <p>2.成功：{{ updateInfo.data.success }}</p>
        <p>3.失败：{{ updateInfo.data.fail }}</p>
        <p>4.结果描述：{{ updateInfo.data.msg }}</p>
        <p>5.用时：{{ updateInfo.data.time }}毫秒</p>
      </div>

      <template #footer>
        <el-button @click="updateSuccInfo = false">取消</el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="pushSuccInfo" title="推送数据统计" width="50%">
      <div class="pbox">
        <p>1.时间：{{ pushInfo.time }}</p>
        <p>2.成功：{{ pushInfo.data.success }}</p>
        <p>3.失败：{{ pushInfo.data.fail }}</p>
      </div>

      <template #footer>
        <el-button @click="pushSuccInfo = false">取消</el-button>
      </template>
    </el-dialog>
    <!-- 批量修改/新增/重提 -->
    <el-dialog :title="upload.title" v-model="upload.open" width="600px" append-to-body>
      <el-upload
        ref="uploadRef"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleSucc"
        :auto-upload="false"
        drag
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link
              type="primary"
              :underline="false"
              style="font-size: 12px; vertical-align: baseline"
              :href="upload.templateUrl"
              Download
              >下载模板</el-link
            >
            <span style="margin-right: 10px" />
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 20px;
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}
:deep(.el-upload-list__item .el-icon--close-tip) {
  top: 20px;
  left: 10px;
  right: 0;
}
.doing {
  color: #b88230;
}
.error {
  color: red;
}
.success {
  color: #67c23a;
}
.again {
  color: #c45656;
}
:deep(.el-popper) {
  max-width: 50% !important;
}
.date-box {
  width: 340px !important;
}
.text-ellipsis {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
</style>
<style>
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}
.pbox {
  line-height: 2em;
}
</style>
